<template>
  <div class="officalList">
    <div class="top">
      <img src="" alt="">
      <div class="title">官方榜</div>
    </div>
     <div class="officalListItem" :style="{backgroundColor:`${item.backgroundColor}`}" v-for="(item,index) in officalList" :key="index" @click="toTopListDetail(item.id)">
       <div class="update">{{item.updateFrequency}}</div>
       <div class="left">
         <div class="name">{{item.name}}</div>
         
         <img :src="item.coverImgUrl" alt="">
       </div>
       <div class="right">
         <div class="list" v-for="(items,i) in item.tracks" :key="i">
           {{i+1}}.
           <p class="name">{{items.first}}-</p>
           <p class="author">{{items.second}}</p>
          </div>
       </div>
     </div>     
  </div>
</template>

<script>
export default {
 props:['officalList'],
 methods:{
   toTopListDetail(id){
     this.$router.push({path:'/toplistdetail',query:{id}})
   }
 }
}
</script>

<style lang="less" scoped>
.officalList{
  width: 7.1rem;
  // position: absolute;
  margin-bottom:0.5rem;
  top:5rem;
  .top{
    height: 1rem;
    .title{
      font-weight: 600;
    }
  }
  .update{
        position: absolute;
        right:0;
        top:0;
        color:#ccc;
        font-size: 0.12rem;
      }
  .officalListItem{
    position: relative;
    width: 6.9rem;
    height: 2.8rem;
    border-radius:0.3rem;
    // border:1px solid #fff;
    margin-bottom:0.15rem;
    .update{
      position: absolute;
      right: 0.1rem;
      top:0.1rem;
      font-size: 0.12rem;
      color:#bbb;
      transform: scale(0.85);
      text-indent: 0.04rem;
    }
    .left{
      position: absolute;
      left:0.5rem;
      top:0.3rem;
      height: 1.4rem;
      width: 1.4rem;
      .name{
        margin:0.1rem 0 0 0.1rem;
        font-size: 0.35rem;
        font-weight: 600;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-bottom:0.1rem;
      }
      img{
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 0.2rem;
      }
      
    }
    .right{
      position: absolute;
      right:0.7rem;
      top:0.5rem;
      width: 3.8rem;
      height: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .list{
        overflow:hidden; //超出的文本隐藏
        white-space:nowrap; 
        text-overflow:ellipsis;
        white-space:nowrap; 
        width: 3.5rem;
        display: flex;
        align-items: center;
        font-size: 0.15rem;
        .author{
          color: #bbb;
          
        }
      }
    }
  }
}
</style>